<!DOCTYPE html>
<html lang=en>
<head>
	
	
        <meta name="baidu-site-verification" content="MlP2pxH3Vl" />
    
	
        <meta name="google-site-verification" content="45SJBg2HD_qTefbPJZZNWWaF-0sEwz_3sR_qo0HEp-M" />
    
    <meta charset="utf-8">
    
    <title>Hexo icarus主题小功能设置 | 东写西读</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="description" content="添加站长统计我们通过站长统计来及时查看我们个人网站的浏览情况。首先，我们需要进行注册：站长统计以下参考：添加cnzz站长统计">
<meta property="og:type" content="article">
<meta property="og:title" content="Hexo icarus主题小功能设置">
<meta property="og:url" content="http://menote.info/2016/04/29/Hexo-icarus主题小功能设置/index.html">
<meta property="og:site_name" content="东写西读">
<meta property="og:description" content="添加站长统计我们通过站长统计来及时查看我们个人网站的浏览情况。首先，我们需要进行注册：站长统计以下参考：添加cnzz站长统计">
<meta property="og:image" content="http://on8y4ksa8.bkt.clouddn.com/17-4-20/21559954-file_1492692685462_1619e.png">
<meta property="og:image" content="http://on8y4ksa8.bkt.clouddn.com/17-4-20/61505860-file_1492692764152_ff3c.png">
<meta property="og:updated_time" content="2017-04-28T01:44:02.985Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Hexo icarus主题小功能设置">
<meta name="twitter:description" content="添加站长统计我们通过站长统计来及时查看我们个人网站的浏览情况。首先，我们需要进行注册：站长统计以下参考：添加cnzz站长统计">
<meta name="twitter:image" content="http://on8y4ksa8.bkt.clouddn.com/17-4-20/21559954-file_1492692685462_1619e.png">
    

    
        <link rel="alternate" href="https://minibox.coding.me/atom.xml" title="东写西读" type="application/atom+xml" />
    

    
        <link rel="icon" href="/css/images/fav.png# path to favicon" />
    

    <link rel="stylesheet" href="/libs/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/libs/open-sans/styles.css">
    <link rel="stylesheet" href="/libs/source-code-pro/styles.css">

    <link rel="stylesheet" href="/css/style.css">

    <script src="/libs/jquery/2.1.3/jquery.min.js"></script>
    
    
        <link rel="stylesheet" href="/libs/lightgallery/css/lightgallery.min.css">
    
    
        <link rel="stylesheet" href="/libs/justified-gallery/justifiedGallery.min.css">
    
    
    
    


</head>

<body>
    <div id="container">
        <header id="header">
    <div id="header-main" class="header-inner">
        <div class="outer">
            <a href="/" id="logo">
                <i class="logo"></i>
                <span class="site-title">东写西读</span>
            </a>
            <nav id="main-nav">
                
                    <a class="main-nav-link" href="/."><i class="fa fa-home"></i>Home</a>
                
                    <a class="main-nav-link" href="/archives"><i class="fa fa-archive"></i>Archives</a>
                
                    <a class="main-nav-link" href="/categories"><i class="fa fa-folder"></i>Categories</a>
                
                    <a class="main-nav-link" href="/tags"><i class="fa fa-tags"></i>Tags</a>
                
                    <a class="main-nav-link" href="/about"><i class="fa fa-user"></i>About</a>
                
            </nav>
            
                
                <nav id="sub-nav">
                    <div class="profile" id="profile-nav">
                        <a id="profile-anchor" href="javascript:;">
                            <img class="avatar" src="/css/images/st.png" />
                            <i class="fa fa-caret-down"></i>
                        </a>
                    </div>
                </nav>
            
            <div id="search-form-wrap">

    <form class="search-form">
        <input type="text" class="ins-search-input search-form-input" placeholder="Search" />
        <button type="submit" class="search-form-submit"></button>
    </form>
    <div class="ins-search">
    <div class="ins-search-mask"></div>
    <div class="ins-search-container">
        <div class="ins-input-wrapper">
            <input type="text" class="ins-search-input" placeholder="Type something..." />
            <span class="ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: 'Posts',
            PAGES: 'Pages',
            CATEGORIES: 'Categories',
            TAGS: 'Tags',
            UNTITLED: '(Untitled)',
        },
        ROOT_URL: '/',
        CONTENT_URL: '/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>
<script src="/js/insight.js"></script>

</div>
        </div>
    </div>
    <div id="main-nav-mobile" class="header-sub header-inner">
        <table class="menu outer">
            <tr>
                
                    <td><a class="main-nav-link" href="/."><i class="fa fa-home"><span class="nav-link-text">Home</span></a></td>
                
                    <td><a class="main-nav-link" href="/archives"><i class="fa fa-archive"><span class="nav-link-text">Archives</span></a></td>
                
                    <td><a class="main-nav-link" href="/categories"><i class="fa fa-folder"><span class="nav-link-text">Categories</span></a></td>
                
                    <td><a class="main-nav-link" href="/tags"><i class="fa fa-tags"><span class="nav-link-text">Tags</span></a></td>
                
                    <td><a class="main-nav-link" href="/about"><i class="fa fa-user"><span class="nav-link-text">About</span></a></td>
                
                <td>
                    
    <div class="search-form">
        <input type="text" class="ins-search-input search-form-input" placeholder="Search" />
    </div>

                </td>
            </tr>
        </table>
    </div>
</header>

        <div class="outer">
            
                

<aside id="profile">
    <div class="inner profile-inner">
        <div class="base-info profile-block">
            <img id="avatar" src="/css/images/st.png" />
            <h2 id="name">Mickole Chou</h2>
            <h3 id="title">Developer &amp; Writer</h3>
            <span id="location"><i class="fa fa-map-marker"></i>Chengdu, China</span>
            <a id="follow" target="_blank" href="https://github.com/mickolechou">FOLLOW</a>
        </div>
        <div class="article-info profile-block">
            <div class="article-info-block">
                9
                <span>posts</span>
            </div>
            <div class="article-info-block">
                13
                <span>tags</span>
            </div>
        </div>
        
        <div class="profile-block social-links">
            <table>
                <tr>
                    
                    
                    <td>
                        <a href="https://github.com/mickolechou" target="_blank" title="github" class=tooltip>
                            <i class="fa fa-github"></i>
                        </a>
                    </td>
                    
                    <td>
                        <a href="/" target="_blank" title="weibo" class=tooltip>
                            <i class="fa fa-weibo"></i>
                        </a>
                    </td>
                    
                    <td>
                        <a href="/" target="_blank" title="weixin" class=tooltip>
                            <i class="fa fa-weixin"></i>
                        </a>
                    </td>
                    
                    <td>
                        <a href="https://minibox.coding.me/atom.xml" target="_blank" title="rss" class=tooltip>
                            <i class="fa fa-rss"></i>
                        </a>
                    </td>
                    
                </tr>
            </table>
        </div>
        
    </div>
</aside>

            
            <section id="main"><article id="post-Hexo-icarus主题小功能设置" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
        
            <header class="article-header">
                
    
        <h1 class="article-title" itemprop="name">
            Hexo icarus主题小功能设置
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/2016/04/29/Hexo-icarus主题小功能设置/">
            <time datetime="2016-04-29T03:05:56.000Z" itemprop="datePublished">2016-04-29</time>
        </a>
    </div>


                        
    <div class="article-category">
    	<i class="fa fa-folder"></i>
        <a class="article-category-link" href="/categories/杂谈/">杂谈</a>
    </div>

                        
    <div class="article-tag">
        <i class="fa fa-tag"></i>
        <a class="tag-link" href="/tags/hexo/">hexo</a>
    </div>

                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
            
                <div id="toc" class="toc-article">
                <strong class="toc-title">Catalogue</strong>
                    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#添加站长统计"><span class="toc-number">1.</span> <span class="toc-text">添加站长统计</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#百度-谷歌验证站点"><span class="toc-number">2.</span> <span class="toc-text">百度/谷歌验证站点</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#百度分享按钮https站点不显示问题"><span class="toc-number">3.</span> <span class="toc-text">百度分享按钮https站点不显示问题</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#解决方案"><span class="toc-number">3.1.</span> <span class="toc-text">解决方案</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#hexo添加公益404"><span class="toc-number">4.</span> <span class="toc-text">hexo添加公益404</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#创建404页面"><span class="toc-number">4.1.</span> <span class="toc-text">创建404页面</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#添加音乐播放器"><span class="toc-number">5.</span> <span class="toc-text">添加音乐播放器</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#添加网易云音乐播放器"><span class="toc-number">5.1.</span> <span class="toc-text">添加网易云音乐播放器</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#支持https的音乐播放器"><span class="toc-number">5.2.</span> <span class="toc-text">支持https的音乐播放器</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#hexo同时部署多个repository"><span class="toc-number">6.</span> <span class="toc-text">hexo同时部署多个repository</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#hexo添加代码一键复制功能"><span class="toc-number">7.</span> <span class="toc-text">hexo添加代码一键复制功能</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#参考"><span class="toc-number">7.1.</span> <span class="toc-text">参考</span></a></li></ol></li></ol>
                </div>
            
            <h2 id="添加站长统计"><a href="#添加站长统计" class="headerlink" title="添加站长统计"></a>添加站长统计</h2><p>我们通过站长统计来及时查看我们个人网站的浏览情况。首先，我们需要进行注册：<a href="http://zhanzhang.cnzz.com/" target="_blank" rel="external">站长统计</a><br>以下参考：<a href="https://github.com/woheme/hexo-theme-icarus/commit/5b3da36aaffa4947cca358f40d5db09eddf3b9b8" target="_blank" rel="external">添加cnzz站长统计</a><br><a id="more"></a></p>
<p>在theme的_config.yml中的末尾添加以下：(这部很重要，不添加web_id将无法显示出来)<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"># CNZZ id</div><div class="line">cnzz: 这里填入你在站长统计注册后的web_id</div></pre></td></tr></table></figure></p>
<p>在目录：主题的layout/_partial/添加文件为cnzz.ejs，内容如下：<br><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">%</span> <span class="attr">if</span> (<span class="attr">theme.cnzz</span>)&#123; %&gt;</span></div><div class="line">Analyse with <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://s4.cnzz.com/z_stat.php?id=&lt;%= theme.cnzz %&gt;&amp;web_id=&lt;%= theme.cnzz %&gt;"</span> <span class="attr">language</span>=<span class="string">"JavaScript"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">%</span> &#125; %&gt;</span></div></pre></td></tr></table></figure></p>
<p><strong>注意</strong>:一定要采用https方式引入，否则chrome浏览器考虑安全性问题不会加载</p>
<p>最后进行显示，在路径layout/_partial/footer.ejs里面添加：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">...PPOffice&lt;/a&gt;.&lt;%- partial(&apos;cnzz&apos;) %&gt;</div></pre></td></tr></table></figure>
<p>再次提醒注意在_config.xml中添加web_id，否则无法显示。当显示出来了，又有一个问题，那就是要填写查看密码了。<br>查看以下即可：<a href="http://help.cnzz.com/support/zhandianshezhi/chankanmimazhezhi/20130903/27.html" target="_blank" rel="external">【设置】如何设置查看密码？（此功能只限站长用户）</a></p>
<h2 id="百度-谷歌验证站点"><a href="#百度-谷歌验证站点" class="headerlink" title="百度/谷歌验证站点"></a>百度/谷歌验证站点</h2><p>为什么要验证站点了，因为要搜索引擎进行收录，说白了就是让别人更容易搜索到你的网站，仅此而已。<br>首先需要到百度/谷歌站长统计中注册，以及验证：<br><a href="http://www.google.com/webmasters/tools/?hl=zh_CN" target="_blank" rel="external">Google网站管理员工具地址</a><br><a href="http://zhanzhang.baidu.com/" target="_blank" rel="external">百度站长工具</a><br>注册完后，进行输入相应的网站地址，然后选择html验证，将代码加入以下路径layout/_partial/head.ejs：（截取部分）</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"baidu-site-verification"</span> <span class="attr">content</span>=<span class="string">"tqvy7RDErf"</span> /&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"google-site-verification"</span> <span class="attr">content</span>=<span class="string">"hjN29-PO_KfE-dgow-7hcz75xJj0qzZ6G2OkXZ3FVd8"</span> /&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></div><div class="line">  ....</div></pre></td></tr></table></figure>
<p>然后发布到github中，再进行验证即可。</p>
<h2 id="百度分享按钮https站点不显示问题"><a href="#百度分享按钮https站点不显示问题" class="headerlink" title="百度分享按钮https站点不显示问题"></a>百度分享按钮https站点不显示问题</h2><p>在主题中设置百度分享按钮之后发现一个问题，就是部署到github page之后不显示，但本地测试可以。之后F12调试，发现百度分享采用的是http，而github page则是https，chrome浏览器考虑安全问题，不允许加载导致线上百度分享按钮脚本未能加载。</p>
<h3 id="解决方案"><a href="#解决方案" class="headerlink" title="解决方案"></a>解决方案</h3><p>要让https站点加载，很简单，将百度分享脚本存放到可支持https的站点即可。这里我直接将百度分享脚本放到hexo的source目录下（hexo根目录的source下或者主题的source下都可以）</p>
<p>百度分享脚本可在一下地址下载：<br><a href="https://github.com/hrwhisper/baiduShare" target="_blank" rel="external">百度分享脚本</a><br>下载之后解压，将static文件夹复制到source目录下即可。</p>
<p>然后找到主题中引用百度分享脚本的地方，我用的是icarus主题，则在themes\icarus\layout\share目录下的bdshare.ejs文件。修改改文件：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">.src=&apos;http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=&apos;+~(-new Date()/36e5)];&lt;/script&gt;</div><div class="line">改为</div><div class="line">.src=&apos;/static/api/js/share.js?v=89860593.js?cdnversion=&apos;+~(-new Date()/36e5)];&lt;/script&gt;</div></pre></td></tr></table></figure></p>
<p>以上步骤完成，搞定。</p>
<h2 id="hexo添加公益404"><a href="#hexo添加公益404" class="headerlink" title="hexo添加公益404"></a>hexo添加公益404</h2><h3 id="创建404页面"><a href="#创建404页面" class="headerlink" title="创建404页面"></a>创建404页面</h3><p>首先在博客根目录的source目录下创建404.md文件<br>然后你可以将页面设计成自己喜欢的样式与主题搭配或直接使用公益404页面。<br>公益404一般有以下两个选择：</p>
<ul>
<li><a href="http://www.qq.com/404/" target="_blank" rel="external">腾讯404</a></li>
<li><a href="http://yibo.iyiyun.com/Home/Index/web404" target="_blank" rel="external">益播404</a></li>
</ul>
<p>这里我直接采用腾讯公益404，使用方式可参考腾讯404说明。<br>在404.md中添加一下内容：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line">---</div><div class="line">title: 404</div><div class="line">layout: false</div><div class="line">permalink: /404.html</div><div class="line">---</div><div class="line">&lt;html&gt;</div><div class="line"> &lt;head&gt;</div><div class="line">  &lt;title&gt;404&lt;/title&gt;</div><div class="line"> &lt;/head&gt;</div><div class="line"> &lt;body&gt;</div><div class="line"> &lt;script type=&quot;text/javascript&quot; src=&quot;//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js&quot; charset=&quot;utf-8&quot; homePageUrl=&quot;https://minibox.coding.me&quot; homePageName=&quot;回到我的主页&quot;&gt;&lt;/script&gt;</div><div class="line">  &lt;/body&gt;</div><div class="line">&lt;/html&gt;</div></pre></td></tr></table></figure>
<p>注意：一定记得在Front-matter添加layout: false，否则会使用默认layout进行页面渲染。<br>homePageUrl改成你blog地址即可。</p>
<p>测试是否正常需部署到github或你服务器之后才能，本地部署不行。</p>
<h2 id="添加音乐播放器"><a href="#添加音乐播放器" class="headerlink" title="添加音乐播放器"></a>添加音乐播放器</h2><p>想像一下，一边欣赏博客一边欣赏音乐是不是一件很美好的事情。</p>
<h3 id="添加网易云音乐播放器"><a href="#添加网易云音乐播放器" class="headerlink" title="添加网易云音乐播放器"></a>添加网易云音乐播放器</h3><p>给hexo博客添加音乐播放器最简单最优雅的方式就是通过网易云音乐生成外链，引入自己博客即可，具体步骤如下：</p>
<ol>
<li>在网易云音乐pc端找到你喜欢的单曲或歌单，点击生成外链：</li>
</ol>
<p><img src="http://on8y4ksa8.bkt.clouddn.com/17-4-20/21559954-file_1492692685462_1619e.png" alt=""></p>
<ol>
<li>进入生成外链页</li>
</ol>
<p><img src="http://on8y4ksa8.bkt.clouddn.com/17-4-20/61505860-file_1492692764152_ff3c.png" alt=""><br>可自定义播放器尺寸，选择是否自动播放，然后复制红框中外链代码放入hexo博客即可。是不是很简单呢，但是有个问题，网易云外链播放器暂时不支持https，所以如果你的博客是https站点，引入网易云音乐播放器后，你那可爱的小绿锁就没了，所以，是否引入自己考量。</p>
<h3 id="支持https的音乐播放器"><a href="#支持https的音乐播放器" class="headerlink" title="支持https的音乐播放器"></a>支持https的音乐播放器</h3><p>目前支持https的音乐播放器太少，找了好久才找到以下方式：<br>通过该<a href="https://github.com/YUX-IO/163music-APlayer-you-get-docker" target="_blank" rel="external">项目</a>插件可在博客引入支持https的音乐播放器。其内部也是基于网易云音乐实现。<br>简单做法就是在iframe标签中引入该插件提供的http连接即可，如下示例：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">&lt;iframe src=&quot;https://music.daoapp.io/iframe?song=287749&amp;qssl=1&amp;qlrc=1&amp;qnarrow=0&amp;max_width=50%&amp;autoplay=1&quot;&gt;</div><div class="line">&lt;/iframe&gt;</div></pre></td></tr></table></figure></p>
<p>即将iframe标签的src属性值设置为插件提供的https连接即可。</p>
<p>该插件支持配置多个参数如，自动播放，大小尺寸，播放模式等，支持参数如下：</p>
<ul>
<li>album=album_id</li>
<li>playlist=playlist_id</li>
<li>song=song_id</li>
<li>program=program_id</li>
<li>radio=radio_id</li>
<li>mv=mv_id</li>
<li>qssl=[0|1] default:0</li>
<li>qlrc=[0|1] default:0</li>
<li>qnarrow=[0|1] default:0</li>
<li>max_width=[100%|32rem|400px|something else] default:100%</li>
<li>max_height=[300px|something else] default:100%</li>
<li>autoplay=[0|1] default:1</li>
<li>mode=[random|single|circulation|order] default:circulation</li>
</ul>
<p>只需将参数加入url后面即可，具体做法参考该项目文档实现。</p>
<h2 id="hexo同时部署多个repository"><a href="#hexo同时部署多个repository" class="headerlink" title="hexo同时部署多个repository"></a>hexo同时部署多个repository</h2><p>同时部署多个repository：</p>
<ol>
<li>备份作用</li>
<li>国内国外双部署，优化访问网络</li>
</ol>
<p>部署一个repository时配置如下：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">deploy:</div><div class="line">  type: git</div><div class="line">  repository: git@github.com:mickolechou/xxx.github.io.git</div><div class="line">  branch: master</div></pre></td></tr></table></figure></p>
<p>通过如下方式同时部署多个repository，默认部署到所有repository的master分支。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">deploy:</div><div class="line">  type: git</div><div class="line">  repo:</div><div class="line">    github: git@github.com:mickolechou/xxx.github.io.git</div><div class="line">    coding: git@git.coding.net:minibox/xxx.git</div><div class="line">    oschina: git@git.oschina.net:minichou/xxx.git</div><div class="line">  branch: master</div></pre></td></tr></table></figure></p>
<p>也是在每个repository后单独指定部署分支，如下：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">deploy:</div><div class="line">  type: git</div><div class="line">  repo:</div><div class="line">    github: git@github.com:mickolechou/xxx.github.io.git,master</div><div class="line">    coding: git@git.coding.net:minibox/xxx.git,master</div><div class="line">    oschina: git@git.oschina.net:minichou/xxx.git,master</div></pre></td></tr></table></figure></p>
<h2 id="hexo添加代码一键复制功能"><a href="#hexo添加代码一键复制功能" class="headerlink" title="hexo添加代码一键复制功能"></a>hexo添加代码一键复制功能</h2><p>最近使用hexo写博客时发现，有个功能很常用单hexo没提供，那就是代码一键复制功能。想着没有就自己简单实现一个呗，然后就开始各种查资料，果然让我找到了：<a href="https://clipboardjs.com/" target="_blank" rel="external">clipboard.js</a></p>
<blockquote>
<p>clipboard.js:复制文本到剪切板不再那么复杂，也不需要繁琐的配置或者加载臃肿的插件；最重要的，不再依赖Flash或者庞大的组件。</p>
</blockquote>
<p>使用也很简单，首先js引入：<br><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"dist/clipboard.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div></pre></td></tr></table></figure></p>
<p>简单示例：<br><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="comment">&lt;!-- Target --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span>=<span class="string">"foo"</span> <span class="attr">value</span>=<span class="string">"https://github.com/zenorocha/clipboard.js.git"</span>&gt;</span></div><div class="line"></div><div class="line"><span class="comment">&lt;!-- Trigger --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">"btn"</span> <span class="attr">data-clipboard-target</span>=<span class="string">"#foo"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"images/clippy.svg"</span> <span class="attr">alt</span>=<span class="string">"Copy to clipboard"</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">button</span>&gt;</span></div></pre></td></tr></table></figure></p>
<p>以上示例可实现点击button达到一键复制input中的内容。</p>
<ul>
<li>Trigger ：触发器即点击该button</li>
<li>Target ：目标即所需复制的内容所在元素</li>
</ul>
<p>接下来我将演示下我是如何通过clipboard.js在我的hexo中添加一键复制功能的。<br>基本思路：</p>
<ol>
<li>首先在每个代码块中动态增加一个触发器button用于实现点击复制按钮</li>
<li>使用clipboard.js高级用法绑定触发器对应的目标元素</li>
<li>添加事件完成（成功或失败之后的操作）</li>
</ol>
<p>主要代码：<br>在主题的source\js\目录下创建：copycode.js文件<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div></pre></td><td class="code"><pre><div class="line">(<span class="function"><span class="keyword">function</span> (<span class="params">$</span>) </span>&#123;</div><div class="line"></div><div class="line">    $(<span class="string">'.highlight'</span>).each(<span class="function"><span class="keyword">function</span> (<span class="params">i, entry</span>) </span>&#123;</div><div class="line">        $(entry).prepend(<span class="string">'&lt;button class="copy-button invisible" data-clipboard-snippet&gt;&lt;i class="fa fa-copy"&gt;&lt;/i&gt;&lt;/button&gt;'</span>);</div><div class="line">    &#125;);</div><div class="line"></div><div class="line">    <span class="keyword">var</span> clipboardSnippets = <span class="keyword">new</span> Clipboard(<span class="string">'[data-clipboard-snippet]'</span>, &#123;</div><div class="line">        <span class="attr">target</span>: <span class="function"><span class="keyword">function</span> (<span class="params">trigger</span>) </span>&#123; <span class="keyword">return</span> trigger.nextElementSibling.querySelector(<span class="string">'.code'</span>); &#125;</div><div class="line">    &#125;);</div><div class="line"></div><div class="line">    clipboardSnippets.on(<span class="string">'success'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>&#123;</div><div class="line">        e.clearSelection();</div><div class="line">        showTooltip(e.trigger, <span class="string">'check'</span>);</div><div class="line">    &#125;);</div><div class="line"></div><div class="line">    clipboardSnippets.on(<span class="string">'error'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>&#123;</div><div class="line">        showTooltip(e.trigger, <span class="string">'close'</span>);</div><div class="line">    &#125;);</div><div class="line"></div><div class="line"></div><div class="line">    $(<span class="built_in">document</span>).on(<span class="string">'mouseleave'</span>, <span class="string">'.highlight'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>&#123; </div><div class="line">        $(<span class="keyword">this</span>).find(<span class="string">'button'</span>).addClass(<span class="string">'invisible'</span>);</div><div class="line">    &#125;).on(<span class="string">'mouseenter'</span>, <span class="string">'.highlight'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>&#123; </div><div class="line">        $(<span class="keyword">this</span>).find(<span class="string">'button'</span>).removeClass(<span class="string">'invisible'</span>);</div><div class="line">    &#125;);</div><div class="line"></div><div class="line"></div><div class="line">    <span class="function"><span class="keyword">function</span> <span class="title">showTooltip</span>(<span class="params">elem, msg</span>) </span>&#123;</div><div class="line">        elem.firstChild.setAttribute(<span class="string">'class'</span>, <span class="string">'fa fa-'</span> + msg);</div><div class="line">        <span class="built_in">window</span>.setTimeout(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">            elem.firstChild.setAttribute(<span class="string">'class'</span>, <span class="string">'fa fa-copy'</span>);</div><div class="line">        &#125;, <span class="number">2000</span>);</div><div class="line">    &#125;</div><div class="line"></div><div class="line"></div><div class="line">&#125;)(jQuery);</div></pre></td></tr></table></figure></p>
<p>然后引入在脚本即可，具体使用参考clipboard.js文档。</p>
<h3 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h3><ol>
<li><a href="https://brightloong.github.io/2017/02/26/Hexo-Github%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2-%E4%B8%89-%E2%80%94%E2%80%94%E7%99%BE%E5%BA%A6%E5%88%86%E4%BA%AB%E9%9B%86%E6%88%90/#more" target="_blank" rel="external">百度分享集成</a></li>
<li><a href="https://github.com/hrwhisper/baiduShare" target="_blank" rel="external">百度分享不支持Https的解决方案</a></li>
<li><a href="https://github.com/YUX-IO/163music-APlayer-you-get-docker" target="_blank" rel="external">163music-APlayer-you-get</a></li>
<li><a href="https://clipboardjs.com/" target="_blank" rel="external">clipboardjs</a></li>
</ol>

        
        </div>
		
			<div id="donate" style="text-align:center">
			<div class="post-donate" style="margin-bottom: 30px;margin-top: 10px;">
    <div id="donate_board" class="donate_bar center">
        <a id="btn_donate" class="btn_donate" href="javascript:;" title="donate"></a>
        <span class="donate_txt">
           欣赏此文？求鼓励，求支持！
        </span>
        <br>
    </div>
    <div id="donate_guide" class="donate_bar donate_bar2 center hidden">
        
        <img src="/css/images/alipay.jpg" id="weixin" title="alipay doante" alt="alipay doante">        
        

        
        <img src="/css/images/wechatpay.jpg" title="wechatpay donate" id="zhifubao" alt="echatpay donate">        
        
    </div>
    <script type="text/javascript">
        $('#weixin').hover()
        document.getElementById('btn_donate').onclick = function () {
            $('#donate_board').addClass('hidden');
            $('#donate_guide').removeClass('hidden');
        }

    </script>
</div>
			</div>
		
        <footer class="article-footer">
            
            <div class="share-container">


    <div class="bdsharebuttonbox">
    <a href="#" class="bds_more" data-cmd="more">分享到：</a>
	<a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信">微信</a>
    <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博">微博</a>
	<!--
    <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博">腾讯微博</a>
    <a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网">人人网</a>
	<a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间">QQ空间</a>
	-->
    
</div>
<script>
window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{"bdSize":16}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
</script>
<style>
    .bdshare_popup_box {
        border-radius: 4px;
        border: #e1e1e1 solid 1px;
    }
    .bdshare-button-style0-16 a,
    .bdshare-button-style0-16 .bds_more {
        padding-left: 20px;
        margin: 6px 10px 6px 0;
    }
    .bdshare_dialog_list a,
    .bdshare_popup_list a,
    .bdshare_popup_bottom a {
        font-family: 'Microsoft Yahei';
    }
    .bdshare_popup_top {
        display: none;
    }
    .bdshare_popup_bottom {
        height: auto;
        padding: 5px;
    }
</style>


</div>

            
            
    
        <a href="http://menote.info/2016/04/29/Hexo-icarus主题小功能设置/#comments" class="article-comment-link">Comments</a>
    

        </footer>
    </div>
    
        
<nav id="article-nav">
    
    
        <a href="/2016/04/21/Java7新特性：try-with-resources自动关闭资源/" id="article-nav-older" class="article-nav-link-wrap">
            <strong class="article-nav-caption">Older</strong>
            <div class="article-nav-title">Java7新特性：try-with-resources自动关闭资源</div>
        </a>
    
</nav>


    
</article>


    
    <section id="comments">
    
        
		<div id="cloud-tie-wrapper" class="cloud-tie-wrapper"></div>
		<style>
			#yun-tie-sdk-wrap {
				padding: 0;
				background: none;
			}
			#yun-tie-sdk-wrap .tie-tab-bar {
				margin: 5px;
				border-bottom: 1px solid #dee4e9;
			
			}
			#yun-tie-sdk-wrap .tie-title-bar {
				padding: 0px;
			}
			#yun-tie-sdk-wrap .tie-title-bar .tie-title {
				font-size: 18PX;
				font-weight: inherit;
			}
			#yun-tie-sdk-wrap .input-box .tie-submit-row {
				position: relative;
				height: 40px;
				background-color: #f7f8f9
			}
			#yun-tie-sdk-wrap .input-box .tie-submit-row .tie-submit-btn {
				background-color: #e84d1c;
			}
			#yun-tie-sdk-wrap .tie-tab-bar li.z-fcs {
				border: 0px;
				background-color: inherit;
			}
			#yun-tie-sdk-wrap .tie-tab-bar li.z-fcs span {
				color: #e84d1c;
			}

			#yun-tie-sdk-wrap .tie-panel-bar .tie-empty-tip {
				padding: 20px 0px;
			}
		</style>
		
    
    </section>

</section>
            
                <aside id="sidebar">
   
        
    <div class="widget-wrap">
        <h3 class="widget-title"><i class="fa fa-book"></i>recent</h3>
        <div class="widget">
            <ul id="recent-post" class="">
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/2016/04/29/Hexo-icarus主题小功能设置/" class="thumbnail">
    
    
        <span class="thumbnail-image thumbnail-none"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/categories/杂谈/">杂谈</a></p>
                            <!--<p class="item-title"><a href="/2016/04/29/Hexo-icarus主题小功能设置/" class="title">Hexo icarus主题小功能设置</a></p>-->
                            <p class="item-title"><a href="/2016/04/29/Hexo-icarus主题小功能设置/" class="title">Hexo icarus主题小功能设置</a></p>
                            <p class="item-date"><time datetime="2016-04-29T03:05:56.000Z" itemprop="datePublished">2016-04-29</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/2016/04/21/Java7新特性：try-with-resources自动关闭资源/" class="thumbnail">
    
    
        <span class="thumbnail-image thumbnail-none"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/categories/java/">java</a></p>
                            <!--<p class="item-title"><a href="/2016/04/21/Java7新特性：try-with-resources自动关闭资源/" class="title">Java7新特性：try-with-resources自动关闭资源</a></p>-->
                            <p class="item-title"><a href="/2016/04/21/Java7新特性：try-with-resources自动关闭资源/" class="title">Java7新特性：try-with-resources...</a></p>
                            <p class="item-date"><time datetime="2016-04-21T08:42:46.000Z" itemprop="datePublished">2016-04-21</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/2016/04/20/缓存穿透及雪崩之常见解决方案/" class="thumbnail">
    
    
        <span class="thumbnail-image thumbnail-none"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/categories/redis/">redis</a></p>
                            <!--<p class="item-title"><a href="/2016/04/20/缓存穿透及雪崩之常见解决方案/" class="title">缓存穿透及雪崩之常见解决方案</a></p>-->
                            <p class="item-title"><a href="/2016/04/20/缓存穿透及雪崩之常见解决方案/" class="title">缓存穿透及雪崩之常见解决方案</a></p>
                            <p class="item-date"><time datetime="2016-04-20T07:33:49.000Z" itemprop="datePublished">2016-04-20</time></p>
                        </div>
                    </li>
                
            </ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title"><i class="fa fa-folder"></i>categories</h3>
        <div class="widget">
            <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/git/">git</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/java/">java</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/redis/">redis</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/杂谈/">杂谈</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/设计模式/">设计模式</a><span class="category-list-count">1</span></li></ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title"><i class="fa fa-archive"></i>archives</h3>
        <div class="widget">
            <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/04/">April 2016</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/03/">March 2016</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/02/">February 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/09/">September 2015</a><span class="archive-list-count">1</span></li></ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title"><i class="fa fa-tags"></i>tag cloud</h3>
        <div class="widget tagcloud">
            <a href="/tags/AutoCloseable/" style="font-size: 10px;">AutoCloseable</a> <a href="/tags/Closeable/" style="font-size: 10px;">Closeable</a> <a href="/tags/git/" style="font-size: 10px;">git</a> <a href="/tags/hexo/" style="font-size: 15px;">hexo</a> <a href="/tags/redis/" style="font-size: 20px;">redis</a> <a href="/tags/sentinel/" style="font-size: 10px;">sentinel</a> <a href="/tags/sentinel原理/" style="font-size: 10px;">sentinel原理</a> <a href="/tags/spring-data-redis/" style="font-size: 10px;">spring-data-redis</a> <a href="/tags/try-with-resources/" style="font-size: 10px;">try-with-resources</a> <a href="/tags/打赏/" style="font-size: 10px;">打赏</a> <a href="/tags/缓存穿透/" style="font-size: 10px;">缓存穿透</a> <a href="/tags/缓存雪崩/" style="font-size: 10px;">缓存雪崩</a> <a href="/tags/设计模式/" style="font-size: 10px;">设计模式</a>
        </div>
    </div>

    
        
    <div class="widget-wrap widget-list">
        <h3 class="widget-title"><i class="fa fa-link"></i>links</h3>
        <div class="widget">
            <ul>
                
                    <li>
                        <a href="http://www.liaoxuefeng.com" target="_blank">廖雪峰</a>
                    </li>
                
                    <li>
                        <a href="http://www.ruanyifeng.com/blog/" target="_blank">阮一峰</a>
                    </li>
                
                    <li>
                        <a href="http://coolshell.cn/" target="_blank">酷壳</a>
                    </li>
                
                    <li>
                        <a href="http://jinnianshilongnian.iteye.com/" target="_blank">开涛的博客</a>
                    </li>
                
            </ul>
        </div>
    </div>


    
    <div id="toTop" class="fa fa-angle-up"></div>
</aside>
            
        </div>

        

        <footer id="footer">
    <div class="outer">
        <div id="footer-info" class="inner">
            &copy; 2017 Mickole Chou<br>
            Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>. Theme by <a href="http://github.com/ppoffice">PPOffice</a>
			.
Analyse with <script src="https://s4.cnzz.com/z_stat.php?id=1261832340&web_id=1261832340" language="JavaScript"></script>

        </div>
    </div>
</footer>
        
    
	<script>
		var cloudTieConfig = {
			url: document.location.href,
			sourceId: "",
			productKey: "undefined",
			target: "cloud-tie-wrapper"
		};
	</script>
	<script src="https://img1.cache.netease.com/f2e/tie/yun/sdk/loader.js"></script>
	



    
        <script src="/libs/lightgallery/js/lightgallery.min.js"></script>
        <script src="/libs/lightgallery/js/lg-thumbnail.min.js"></script>
        <script src="/libs/lightgallery/js/lg-pager.min.js"></script>
        <script src="/libs/lightgallery/js/lg-autoplay.min.js"></script>
        <script src="/libs/lightgallery/js/lg-fullscreen.min.js"></script>
        <script src="/libs/lightgallery/js/lg-zoom.min.js"></script>
        <script src="/libs/lightgallery/js/lg-hash.min.js"></script>
        <script src="/libs/lightgallery/js/lg-share.min.js"></script>
        <script src="/libs/lightgallery/js/lg-video.min.js"></script>
    
    
        <script src="/libs/justified-gallery/jquery.justifiedGallery.min.js"></script>
    
    



<!-- Custom Scripts -->
<script src="https://cdn.jsdelivr.net/clipboard.js/1.6.0/clipboard.min.js"></script>
<script src="/js/main.js"></script>
<script src="/js/copycode.js"></script>

    </div>
</body>
</html>